<template>
    <div class="nav-bar">
        <div class="nav-links">
            <div class="nav-item" @click="handleNavClick('home', $event)">首页</div>
            <div class="nav-item" @click="handleNavClick('personal', $event)">个人中心</div>
            <div class="nav-item" @click="handleNavClick('analysis', $event)">数据分析</div>
        </div>
        <div class="user-section">
            <div class="user-avatar" @click="toggleUserDropdown">
                <div class="avatar-placeholder">
                    {{ checkUserLogin() ? getUserRole() : '用户' }}
                </div>
            </div>
            <div class="login-dropdown" v-if="showLoginDropdown">
                <button v-if="!checkUserLogin()" @click="handleQuickLogin">快速登录</button>
                <button v-else @click="handleLogout">退出登录</button>
            </div>
        </div>
    </div>
    <!-- 功能提示小弹窗 -->
    <div class="feature-prompt-mini" v-if="showFeaturePrompt" 
         :style="{ top: promptPosition.top + 'px', left: promptPosition.left + 'px' }">
      <div class="prompt-arrow"></div>
      <div class="prompt-content">
        <p>{{ currentFeature === 'personal' ? '个人中心' : '数据分析' }}需要登录</p>
        <div class="prompt-buttons">
          <button class="cancel-btn" @click="closeFeaturePrompt">取消</button>
          <button class="login-btn" @click="goToLoginFromPrompt">去登录</button>
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const showLoginDropdown = ref(false);
const showFeaturePrompt = ref(false);
const currentFeature = ref('');
const promptPosition = ref({ top: 0, left: 0 });

// 添加用户登录状态检测方法
const checkUserLogin = () => {
  return !!localStorage.getItem('userInfo') || !!localStorage.getItem('doctorInfo');
};

// 获取用户角色方法
const getUserRole = () => {
  if (localStorage.getItem('doctorInfo')) {
    return '医生';
  }
  if (localStorage.getItem('userInfo')) {
    return '患者';
  }
  return null;
};

// 添加退出登录处理
const handleLogout = () => {
  localStorage.removeItem('userInfo');
  localStorage.removeItem('doctorInfo');
  showLoginDropdown.value = false;
  window.location.reload();
};

// 添加下拉菜单切换
const toggleUserDropdown = () => {
  showLoginDropdown.value = !showLoginDropdown.value;
};

// 处理导航点击
const handleNavClick = (route, event) => {
  // 如果需要登录的功能，检查登录状态
  if ((route === 'personal' || route === 'analysis') && !checkUserLogin()) {
    // 阻止默认导航
    event.preventDefault();

    // 设置当前需要登录的功能
    currentFeature.value = route;

    // 计算弹窗位置 (基于点击的元素)
    const target = event.target;
    const rect = target.getBoundingClientRect();
    promptPosition.value = {
      top: rect.bottom + 10, // 在点击元素下方10px
      // 修改这里的left计算，让弹窗的箭头(距离左边20px)对准点击元素的中心
      left: rect.left + rect.width / 2 - 20 // 箭头的left偏移量是20px
    };

    // 显示登录提示弹窗
    showFeaturePrompt.value = true;

  } else {
    // 正常导航
    if (route === 'home') {
      router.push('/');
    } else {
      router.push(`/${route}`);
    }
  }
};

// 快速登录 (用于下拉菜单)
const handleQuickLogin = () => {
  router.push('/login');
  showLoginDropdown.value = false;
};

// 关闭功能提示弹窗
const closeFeaturePrompt = () => {
  showFeaturePrompt.value = false;
};

// 从提示弹窗跳转到登录页
const goToLoginFromPrompt = () => {
  router.push('/login');
  closeFeaturePrompt(); // 关闭弹窗
};
</script>

<style scoped>
/* 导入字体 */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

.nav-bar {
    width: 100%;
    height: 60px;
    /* 使用渐变背景，与医生工作站头部呼应 */
    background: linear-gradient(to right, #8B4513, #A0522D);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 增加阴影深度 */
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-item {
    font-family: 'Ma Shan Zheng', 'KaiTi', serif; /* 优先使用马山正字体 */
    font-size: 1.3rem; /* 稍微增大字体 */
    color: #fff; /* 导航文字颜色改为白色 */
    cursor: pointer;
    transition: color 0.3s, transform 0.2s; /* 添加transform过渡 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
}

.nav-item:hover {
    color: #FFD700; /* 悬停时变为金色 */
    text-decoration: none; /* 移除下划线 */
    transform: translateY(-2px); /* 悬停时上移 */
}

.user-section {
    position: relative;
}

.user-avatar {
    position: relative;
    width: 45px; /* 稍微增大头像 */
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #FFD700; /* 边框颜色改为金色 */
    background-color: #f0e6d2;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* 添加金色阴影 */
}

.user-avatar:hover {
    transform: scale(1.1); /* 悬停时放大更多 */
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8); /* 悬停时阴影更明显 */
}

.user-avatar:active {
    transform: scale(0.9);
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem; /* 稍微增大字体 */
    color: #8B4513;
    font-weight: bold;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-dropdown {
    position: absolute;
    top: 55px; /* 调整位置 */
    right: 0;
    background-color: #FFF8DC; /* 下拉背景色 */
    border-radius: 8px; /* 增加圆角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 增加阴影 */
    padding: 10px;
    z-index: 1000;
    min-width: 120px; /* 增加最小宽度 */
    animation: dropdownFadeIn 0.3s ease-out; /* 调整动画 */
    border: 1px solid #D2B48C; /* 添加边框 */
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-15px); } /* 调整动画起始位置 */
    to { opacity: 1; transform: translateY(0); }
}

.login-dropdown button {
    background-color: #A0522D; /* 按钮背景色 */
    color: white;
    border: none;
    padding: 10px 15px; /* 调整内边距 */
    border-radius: 6px; /* 增加圆角 */
    cursor: pointer;
    font-family: 'Ma Shan Zheng', 'KaiTi', serif;
    font-size: 1rem; /* 调整字体大小 */
    width: 100%;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.1s; /* 添加过渡 */
}

.login-dropdown button:hover {
    background-color: #8B4513; /* 悬停背景色 */
    transform: translateY(-1px); /* 悬停时轻微上移 */
}

.login-dropdown button:active {
    transform: translateY(0);
}


/* 功能提示小弹窗样式 */
.feature-prompt-mini {
    position: absolute;
    z-index: 1000;
    background-color: #FFF8DC; /* 背景色 */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 240px; /* 调整宽度 */
    animation: popIn 0.3s ease-out; /* 调整动画 */
    border: 1px solid #D2B48C; /* 添加边框 */
}

@keyframes popIn {
    from { opacity: 0; transform: translateY(-15px); } /* 调整动画起始位置 */
    to { opacity: 1; transform: translateY(0); }
}

.prompt-arrow {
    position: absolute;
    top: -8px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #FFF8DC; /* 箭头颜色与背景色一致 */
}

.prompt-content {
    padding: 15px;
}

.prompt-content p {
    margin: 0 0 15px 0; /* 调整下边距 */
    font-family: 'Ma Shan Zheng', 'KaiTi', serif;
    font-size: 1.1rem; /* 调整字体大小 */
    color: #5D4037;
    text-align: center;
}

.prompt-buttons {
    display: flex;
    justify-content: space-around; /* 按钮居中分散 */
    gap: 10px; /* 按钮间距 */
}

.prompt-buttons button {
    flex: 1; /* 按钮等宽 */
    padding: 8px 12px; /* 调整内边距 */
    border-radius: 4px;
    font-family: 'Ma Shan Zheng', 'KaiTi', serif;
    font-size: 1rem; /* 调整字体大小 */
    cursor: pointer;
    transition: all 0.2s;
}

.prompt-buttons .cancel-btn {
    background-color: #f0e6d2;
    color: #8B4513;
    border: 1px solid #d1c4b0;
}

.prompt-buttons .cancel-btn:hover {
    background-color: #e6d8c0;
}

.prompt-buttons .login-btn {
    background-color: #8B4513;
    color: white;
    border: none;
}

.prompt-buttons .login-btn:hover {
    background-color: #6D351A;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .nav-bar {
    padding: 0 15px; /* 调整内边距 */
  }

  .nav-links {
    gap: 15px; /* 调整链接间距 */
  }

  .nav-item {
    font-size: 1rem; /* 调整字体大小 */
  }

  .user-avatar {
    width: 35px; /* 调整头像大小 */
    height: 35px;
  }

  .avatar-placeholder {
    font-size: 0.7rem; /* 调整字体大小 */
  }

  .login-dropdown {
    top: 45px; /* 调整下拉位置 */
    min-width: 100px;
  }

  .feature-prompt-mini {
    width: 200px; /* 调整弹窗宽度 */
  }

  .prompt-content p {
    font-size: 0.9rem; /* 调整字体大小 */
  }

  .prompt-buttons button {
    font-size: 0.8rem; /* 调整字体大小 */
  }
}
</style>